<div class="main-container">
  <div nz-row nzType="flex">
    <div class="box">
      <nz-card [nzBordered]="false" nzTitle="干渠进口水位流量" (click)="openModal(0, 0)" class="card">
        <div class="progress-box">
          <div class="progress-container">
            <nz-progress [nzPercent]="inletPercentage" nzType="circle" [nzWidth]="180" [nzStrokeWidth]="6"
              [nzStrokeColor]="{'100%': '#ffae00' }" [nzFormat]="formatPercentage"></nz-progress>
            <div class="text-wrap">
              <p class="data">{{inletPercentage}}%</p>
              <p class="title">报送进度</p>
            </div>
          </div>

        </div>
        <div class="info-box">
          <div class="info-content">
            <p class="num">
              <i></i>
              {{inletFinishedNum}}
            </p>
            <p class="title">已报送</p>
          </div>
          <div class="info-content">
            <p class="num" style="color: #ff3232">
              <i style="background: #e1e8ee;"></i>
              {{inletUnfinishedNum}}
            </p>
            <p class="title">未报送</p>
          </div>
          <div class="info-content">
            <p class="num">
              <i></i>
              {{inletPercentage}}%
            </p>
            <p class="title">报送进度</p>
          </div>
        </div>
      </nz-card>
      <!--<ng-template #bell_1_Template>-->
      <!--<a class="title-btn" (click)="openModal(0, 0)">-->
      <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
      <!--&lt;!&ndash;<b class="hint">&ndash;&gt;-->
      <!--&lt;!&ndash;{{inletUnfinishedNum}}&ndash;&gt;-->
      <!--&lt;!&ndash;</b>&ndash;&gt;-->
      <!--</a>-->
      <!--</ng-template>-->
    </div>
    <div class="box">
      <nz-card [nzBordered]="false" nzTitle="湖泊湿地补水报送进度" (click)="openModal(2, 1)" class="card">
        <div class="progress-box">
          <div class="progress-container">
            <nz-progress [nzPercent]="lakePercentage" nzType="circle" [nzWidth]="180" [nzStrokeWidth]="6"
              [nzStrokeColor]="{'100%': '#5a7bef' }" [nzFormat]="formatPercentage"></nz-progress>
            <div class="text-wrap">
              <p class="data">{{lakePercentage}}%</p>
              <p class="title">报送进度</p>
            </div>
          </div>

        </div>
        <div class="info-box">
          <div class="info-content">
            <p class="num">
              <i></i>
              {{lakeFinishedNum}}
            </p>
            <p class="title">已报送</p>
          </div>
          <div class="info-content">
            <p class="num" style="color: #ff3232">
              <i style="background: #e1e8ee;"></i>
              {{lakeUnfinishedNum}}
            </p>
            <p class="title">未报送</p>
          </div>
          <div class="info-content">
            <p class="num">
              <i></i>
              {{lakePercentage}}%
            </p>
            <p class="title">报送进度</p>
          </div>
        </div>

      </nz-card>

      <!--<ng-template #bell_3_Template>-->
      <!--<a class="title-btn" (click)="openModal(2, 1)">-->
      <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
      <!--</a>-->
      <!--</ng-template>-->
    </div>

    <div class="box">
      <nz-card [nzBordered]="false" nzTitle="用水量报送进度" (click)="openModal(3, 1)" class="card">
        <div class="progress-box">
          <div class="progress-container">
            <nz-progress [nzPercent]="waterUsagePercentage" nzType="circle" [nzWidth]="180" [nzStrokeWidth]="6"
              [nzStrokeColor]="{'100%': '#5a7bef' }" [nzFormat]="formatPercentage"></nz-progress>
            <div class="text-wrap">
              <p class="data">{{waterUsagePercentage}}%</p>
              <p class="title">报送进度</p>
            </div>
          </div>

        </div>
        <div class="info-box">
          <div class="info-content">
            <p class="num">
              <i></i>
              {{waterUsageFinishedNum}}
            </p>
            <p class="title">已报送</p>
          </div>
          <div class="info-content">
            <p class="num" style="color: #ff3232">
              <i style="background: #e1e8ee;"></i>
              {{waterUsageUnfinishedNum}}
            </p>
            <p class="title">未报送</p>
          </div>
          <div class="info-content">
            <p class="num">
              <i></i>
              {{waterUsagePercentage}}%
            </p>
            <p class="title">报送进度</p>
          </div>
        </div>

      </nz-card>

      <!--<ng-template #bell_3_Template>-->
      <!--<a class="title-btn" (click)="openModal(2, 1)">-->
      <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
      <!--</a>-->
      <!--</ng-template>-->
    </div>
    <!--<div class="box">-->
    <!--<nz-card [nzBordered]="false"-->
    <!--nzTitle="工业用水报送"-->
    <!--class="card"-->
    <!--[nzExtra]="bell_4_Template">-->
    <!--<div class="progress-box">-->
    <!--<div class="progress-container">-->
    <!--<nz-progress [nzPercent]="industrialPercentage"-->
    <!--nzType="circle"-->
    <!--[nzWidth]="180"-->
    <!--[nzStrokeWidth]="6"-->
    <!--[nzStrokeColor]="{'100%': '#29b6f6' }"-->
    <!--[nzFormat]="formatPercentage"></nz-progress>-->
    <!--<div class="text-wrap">-->
    <!--<p class="data">{{industrialPercentage}}%</p>-->
    <!--<p class="title">报送进度</p>-->
    <!--</div>-->
    <!--</div>-->

    <!--</div>-->
    <!--<div class="info-box">-->
    <!--<div class="info-content">-->
    <!--<p class="num">-->
    <!--<i></i>-->
    <!--{{industrialFinishedNum}}-->
    <!--</p>-->
    <!--<p class="title">已报送</p>-->
    <!--</div>-->
    <!--<div class="info-content">-->
    <!--<p class="num" style="color: #ff3232">-->
    <!--<i style="background: #e1e8ee;"></i>-->
    <!--{{industrialUnfinishedNum}}-->
    <!--</p>-->
    <!--<p class="title">未报送</p>-->
    <!--</div>-->
    <!--<div class="info-content">-->
    <!--<p class="num">-->
    <!--<i></i>-->
    <!--{{industrialPercentage}}%-->
    <!--</p>-->
    <!--<p class="title">报送进度</p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</nz-card>-->
    <!--<ng-template #bell_4_Template>-->
    <!--<a class="title-btn" (click)="openModal(3, 1)">-->
    <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
    <!--</a>-->
    <!--</ng-template>-->
    <!--</div>-->
    <div class="box">
      <nz-card [nzBordered]="false" nzTitle="灌溉进度" (click)="openModal(1, 1)" class="card">
        <div class="progress-box">
          <div class="progress-container">
            <nz-progress [nzPercent]="irrigatePercentage" nzType="circle" [nzWidth]="180" [nzStrokeWidth]="6"
              [nzStrokeColor]="{'100%': '#7dc855' }" [nzFormat]="formatPercentage">
            </nz-progress>
            <div class="text-wrap">
              <p class="data">{{irrigatePercentage}}%</p>
              <p class="title">报送进度</p>
            </div>
          </div>

        </div>
        <div class="info-box">
          <div class="info-content">
            <p class="num">
              <i></i>
              {{irrigateFinishedNum}}
            </p>
            <p class="title">已报送</p>
          </div>
          <div class="info-content">
            <p class="num" style="color: #ff3232">
              <i style="background: #e1e8ee;"></i>
              {{irrigateUnfinishedNum}}
            </p>
            <p class="title">未报送</p>
          </div>
          <div class="info-content">
            <p class="num">
              <i></i>
              {{irrigatePercentage}}%
            </p>
            <p class="title">报送进度</p>
          </div>
        </div>
      </nz-card>
      <!--<ng-template #bell_2_Template>-->
      <!--<a class="title-btn" (click)="openModal(1, 1)">-->
      <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
      <!--</a>-->
      <!--</ng-template>-->
    </div>
    <div class="box">
      <nz-card [nzBordered]="false" nzTitle="月度水情报送" (click)="openModal(4, 1)" class="card">
        <div class="progress-box">
          <div class="progress-container">
            <nz-progress [nzPercent]="monthlyPercentage" nzType="circle" [nzWidth]="180" [nzStrokeWidth]="6"
              [nzStrokeColor]="{'100%': '#986ee2' }" [nzFormat]="formatPercentage"></nz-progress>
            <div class="text-wrap">
              <p class="data">{{monthlyPercentage}}%</p>
              <p class="title">报送进度</p>
            </div>
          </div>

        </div>
        <div class="info-box">
          <div class="info-content">
            <p class="num">
              <i></i>
              {{monthlyFinishedNum}}
            </p>
            <p class="title">已报送</p>
          </div>
          <div class="info-content">
            <p class="num" style="color: #ff3232">
              <i style="background: #e1e8ee;"></i>
              {{monthlyUnfinishedNum}}
            </p>
            <p class="title">未报送</p>
          </div>
          <div class="info-content">
            <p class="num">
              <i></i>
              {{monthlyPercentage}}%
            </p>
            <p class="title">报送进度</p>
          </div>
        </div>
      </nz-card>
      <!--<ng-template #bell_5_Template>-->
      <!--<a class="title-btn" (click)="openModal(4, 1)">-->
      <!--<i nz-icon nzType="ellipsis" nzTheme="outline"></i>-->
      <!--</a>-->
      <!--</ng-template>-->
    </div>
  </div>

  <div nz-row nzType="flex">
    <!--<div class="bottom-box box-col-1">-->
    <!--<nz-card [nzBordered]="false"-->
    <!--nzTitle="灌区运行状态"-->
    <!--class="card">-->
    <!--<div class="sub-box">-->
    <!--<div class="sub-title">-->
    <!--<span>干渠警戒水位/流量指标</span>-->
    <!--<a class="title-btn" (click)="openModal(5, 2)">-->
    <!--<i nz-icon nzType="info-circle" nzTheme="outline"></i> 运行详情-->
    <!--</a>-->
    <!--</div>-->
    <!--<div class="sub-content">-->
    <!--<div class="progress-box">-->
    <!--<div class="progress-container">-->
    <!--<div echarts [options]="liquidChartOption" [merge]="greenLiquidOption"></div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="info-box">-->
    <!--<div class="info-content">-->
    <!--<p class="num">-->
    <!--<i></i>-->
    <!--{{ irrRunTotal.normal }}-->
    <!--</p>-->
    <!--<p class="title">正在运行</p>-->
    <!--</div>-->
    <!--<div class="info-content">-->
    <!--<p class="num" style="color: #ff3232">-->
    <!--<i style="background: #e1e8ee;"></i>-->
    <!--{{ irrRunTotal.abnormal }}-->
    <!--</p>-->
    <!--<p class="title">异常运行</p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <!--</div>-->
    <!--<div class="sub-box">-->
    <!--<div class="sub-title">-->
    <!--<span>引水计划指标</span>-->
    <!--<a class="title-btn" (click)="openModal(6, 2)">-->
    <!--<i nz-icon nzType="info-circle" nzTheme="outline"></i> 运行详情-->
    <!--</a>-->
    <!--</div>-->
    <!--<div class="sub-content">-->
    <!--<div class="progress-box">-->
    <!--<div class="progress-container">-->
    <!--<div echarts [options]="liquidChartOption" [merge]="blueLiquidOption"></div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="info-box">-->
    <!--<div class="info-content">-->
    <!--<p class="num">-->
    <!--<i></i>-->
    <!--0-->
    <!--</p>-->
    <!--<p class="title">正在运行</p>-->
    <!--</div>-->
    <!--<div class="info-content">-->
    <!--<p class="num" style="color: #ff3232">-->
    <!--<i style="background: #e1e8ee;"></i>-->
    <!--0-->
    <!--</p>-->
    <!--<p class="title">异常运行</p>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</nz-card>-->
    <!--</div>-->
    <!--<div class="bottom-box box-col-4">-->
    <!--<nz-card [nzBordered]="false"-->
    <!--nzTitle="指标详情"-->
    <!--class="card">-->
    <!--<nz-tabset style="height: 100%">-->
    <!--<nz-tab nzTitle="灌溉进度">-->
    <!--<div class="row-box">-->
    <!--<div echarts [options]="irrBaseChartOpt" [merge]="irrProgressDataChartOpt" class="chart"></div>-->
    <!--</div>-->
    <!--</nz-tab>-->
    <!--<nz-tab nzTitle="湖泊湿地补水">-->
    <!--<div class="row-box lake-box">-->

    <!--<div class="general-box">-->
    <!--<div echarts [options]="processBaseChartOption" [merge]="processChartOpt" class="chart" style="height: 100%;"></div>-->
    <!--</div>-->
    <!--<div class="detail-box">-->
    <!--&lt;!&ndash;<div echarts [options]="detailIrrigateChartOption" class="chart"></div>&ndash;&gt;-->
    <!--<div *ngFor="let item of lakeDetailList" class="detail-card">-->
    <!--<p class="title">-->
    <!--<span class="name">{{item.trName}}</span>-->
    <!--<span style="font-size: 12px">(万m³)</span>-->
    <!--</p>-->
    <!--<div echarts [options]="detailIrrigateChartOption" [merge]="item.lakeOpt" class="chart" style="height: 100%;"></div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</nz-tab>-->
    <!--</nz-tabset>-->
    <!--</nz-card>-->
    <!--</div>-->
    <div class="bottom-box">
      <nz-card [nzBordered]="false" [nzTitle]="detailTitle" [nzExtra]="bottom_btn_Template" class="card">
        <div class="bottom-table-wrap">
          <nz-table #dataTable nzBordered [nzFrontPagination]="false" [nzShowPagination]="false" [nzData]="tableData1"
            nzSize="middle">
            <thead>
              <tr>
                <th *ngFor="let name of headData">{{name}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of dataTable.data">
                <td *ngIf="tableType !== 2">{{ row.frName }}</td>
                <td *ngIf="tableType === 2">{{ row.name }}</td>
                <td *ngIf="tableType === 0">{{ row.hour }}</td>
                <td *ngIf="tableType === 2">{{ row.normalNum }}</td>
                <td *ngIf="tableType === 2" [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">
                  {{ row.unnormalNum }}
                </td>
                <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}" *ngIf="tableType !== 2">
                  {{ row.status }}
                </td>
                <!--<td>-->
                <!--<a class="red"-->
                <!--style="text-decoration: solid"-->
                <!--*ngIf="row.statu === 1"-->
                <!--(click)="broadcast(row)">通知</a>-->
                <!--</td>-->
              </tr>
            </tbody>
          </nz-table>

          <nz-table #dataTable2 nzBordered [nzFrontPagination]="false" [nzShowPagination]="false" [nzData]="tableData2"
            nzSize="middle">
            <thead>
              <tr>
                <th *ngFor="let name of headData">{{name}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let row of dataTable2.data">
                <td *ngIf="tableType !== 2">{{ row.frName }}</td>
                <td *ngIf="tableType === 2">{{ row.name }}</td>
                <td *ngIf="tableType === 0">{{ row.hour }}</td>
                <td *ngIf="tableType === 2">{{ row.normalNum }}</td>
                <td *ngIf="tableType === 2" [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">
                  {{ row.unnormalNum }}
                </td>
                <td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}" *ngIf="tableType !== 2">
                  {{ row.status }}
                </td>
                <!--<td>-->
                <!--<a class="red"-->
                <!--style="text-decoration: solid"-->
                <!--*ngIf="row.statu === 1"-->
                <!--(click)="broadcast(row)">通知</a>-->
                <!--</td>-->
              </tr>
            </tbody>
          </nz-table>
        </div>
        <ng-template #bottom_btn_Template>
          <button nz-button nzType="primary" (click)="broadcastAll()">
            一键催报
          </button>
        </ng-template>
      </nz-card>
    </div>
  </div>
</div>

<!--<nz-modal class="custom-modal" nzWidth="900" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"-->
<!--(nzOnCancel)="closeModal()" [nzFooter]="null">-->
<!--<nz-table-->
<!--#dataTable-->
<!--nzBordered-->
<!--nzShowPagination-->
<!--[nzPageSize]="10"-->
<!--[nzData]="tableData"-->
<!--[nzPageIndex]="pageIndex"-->
<!--nzSize="middle">-->
<!--<thead>-->
<!--<tr>-->
<!--<th *ngFor="let name of headData">{{name}}</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr *ngFor="let row of dataTable.data">-->
<!--<td *ngIf="tableType !== 2">{{ row.frName }}</td>-->
<!--<td *ngIf="tableType === 2">{{ row.name }}</td>-->
<!--<td *ngIf="tableType === 0">{{ row.hour }}</td>-->
<!--<td *ngIf="tableType === 2">{{ row.normalNum }}</td>-->
<!--<td *ngIf="tableType === 2" [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}">{{ row.unnormalNum }}</td>-->
<!--<td [ngClass]="{'green': row.statu === 2, 'red': row.statu === 1}" *ngIf="tableType !== 2">{{ row.status }}</td>-->
<!--<td>-->
<!--<a class="red"-->
<!--style="text-decoration: solid"-->
<!--*ngIf="row.statu === 1"-->
<!--(click)="broadcast(row)">通知</a>-->
<!--</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</nz-table>-->
<!--</nz-modal>-->
